<template>
  <div>
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
<!--        基本信息-->
        <el-tab-pane label="基本信息" name="first">
          <el-form :model="formList" :disabled="show">
            <el-row>
              <el-col :span="8">
                <el-form-item label="员工编号：" label-width="120px">
                  <el-input v-model="formList.userId" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="司机名称：" label-width="120px">
                  <el-input v-model="formList.name" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="说属机构：" label-width="120px">
                  <el-input v-model="formList.agency.name" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="电话：" label-width="120px">
                  <el-input v-model="formList.mobile" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="年龄：" label-width="120px">
                  <el-input v-model="formList.age" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
           <el-row type="flex" justify="center" v-if="show1">
             <el-button type="danger" @click="edit" >编辑</el-button>
           </el-row>
          <el-row type="flex" justify="center" v-else >
            <el-button type="danger" @click="save">保存</el-button>
            <el-button type="danger" @click="show1=true">取消</el-button>
          </el-row>
        </el-tab-pane>
<!--        驾驶证信息-->
        <el-tab-pane label="驾驶证信息" name="second">
          <el-form :model="modelList" disabled>
            <el-row>
              <el-col :span="8">
                <el-form-item label="驾驶证号：" label-width="120px">
                  <el-input v-model="modelList.licenseNumber" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="准驾车型：" label-width="120px">
                  <el-input v-model="modelList.allowableType" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="初次领证信息：" label-width="120px">
                  <el-input v-model="modelList.initialCertificateDate" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="驾驶证有效期限：" label-width="120px">
                  <el-input v-model="modelList.validPeriod" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="驾龄：" label-width="120px">
                  <el-input v-model="modelList.driverAge" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="驾驶证类型：" label-width="120px">
                  <el-input v-model="modelList.licenseType" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="从业资格证：" label-width="120px">
                  <el-input v-model="modelList.qualificationCertificate" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入场证信息：" label-width="120px">
                  <el-input v-model="modelList.passCertificate" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="图片信息">
                <template #default>

                </template>
<!--                  <el-image :src="picture[0]" style="width: 212px;height: 159px" :preview-src-list="[picture[0]]"></el-image>-->
<!--                  <el-image  :src="picture[1]" style="width: 212px;height: 159px" :preview-src-list="[picture[1]]"></el-image>-->
              </el-form-item>
            </el-row>
          </el-form>
          <imgUpload @handlePictureCardPreview="handlePictureCardPreview" :fileList="fileList"></imgUpload>
        </el-tab-pane>

      </el-tabs>

    </el-card>

  </div>
</template>

<script>
import { getDriverDetail, getDriverLicense } from '@/api/driver'
import ImgUpload from '@/components/imgupload.vue'

export default {
  name: 'detail',
  components: { ImgUpload },
  data () {
    return {
      dialogVisible: false,
      disabled: false,
      activeName: 'first',
      page: {

      },
      formList: {
        userId: '',
        name: '',
        agency: {
          name: ''
        },
        mobile: '',
        age: ''
      },
      modelList: {
        licenseNumber: '',
        allowableType: '',
        initialCertificateDate: '',
        validPeriod: '',
        driverAge: '',
        licenseType: '',
        qualificationCertificate: '',
        passCertificate: ''
      },
      fileList: [],
      // picture1: 'https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/7529b34d-d276-4677-9517-669cca018b48.png'// 没有图的默认展示
      show: true,
      show1: true

    }
  },
  beforeRouteEnter (to, from, next) {
    console.log('beforeRouteEnter')
    next()
  },
  beforeRouteUpdate (to, from, next) { // 路由更新之前
    console.log(this.$route.query.id)// 打印出更新前对应的id
    console.log(to.query.id)// 打印出更新后对应的id
    console.log('beforeRouteUpdate')
    next()
  },
  beforeRouteLeave (to, from, next) {
    console.log('beforeRouteLeave')
    next()
  },
  beforeEnter (to, from, next) {
    console.log('beforeEnter')
    next()
  },
  created () {
    this.getDriverDetail()
    console.log('12')
  },
  methods: {
  /// / 获取司机基本信息详情
    async getDriverDetail () {
      console.log(this.$route.query.id)
      const res = await getDriverDetail(this.$route.query.id)
      this.formList = res.data
      console.log(this.formList)
    },
    // 点击tabs切换
    async handleClick (tab, event) {
      // console.log(tab, event)
      await this.getDriverLicense()
    },
    // 驾驶证信息
    async getDriverLicense () {
      const res = await getDriverLicense(this.$route.query.id)
      console.log(res)
      this.modelList = res.data
      this.fileList = res.data.picture.split(',')
      console.log(this.fileList)
      // console.log(this.fileList[0])
      // console.log(this.fileList[1])
    },
    // 编辑基础信息
    edit () {
      this.show = false
      this.show1 = false
    },
    save () {
      this.$message({
        message: '保存成功',
        type: 'success'
      })
      this.show1 = true
    },
    handlePictureCardPreview (file) {
      console.log(1)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }

  }
}
</script>
